@charset "utf-8";

@function r($px){
    @return ($px/40) * 1rem;
}
@function px($px){
    @return ($px/2) * 1px;
}  

*{
    margin: 0;
    padding: 0;
}
body{
//  background: black;
}
#web{
    height: 100%;
    margin: 0 auto;
    min-width: 320px;
    max-width: 480px; 
    background: white;
    .game{
//      display: none;
        min-width: 320px;
        max-width: 480px; 
        min-height: 568px;
        max-height: 736px;
        height: 100%;
        position: relative;
        
        //提示
        .tishi{
            position: absolute;
            text-align: center;
            background:black;
            color: white;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) ;
            padding: 10% 0;
            width: 60%;
            opacity: 0.8;
            border-radius: 5%;
            display: none;
        }
        
        
        //选项公用
    .change{
        display: none;
            position: absolute;
            bottom: 0;
            padding-left: 5%;
            padding-bottom: 7%;
            .a,.b,.c{
                text-align: left;
                position: relative;
                
                p{
                    position:absolute;
                    top: 50%;
                    transform: translateY(-70%);
                    left: 25%;
                    font-size: px(36);
                    width: 70%;
                }
                img{
                   width: px(516); 
                }
            }
            .smallmouth{
                text-align: center;
                position: absolute;
                z-index: 11;
                bottom: 65%;
                right: -42%;
                img{
                    width: 60%;
                }
            }
           .time60{
               width: 20%;
               height: 20%;
               background: transparent;
               position: absolute;
               bottom: 74%;
                z-index: 100;
                right: -26%;
                text-align: center;
                font-size: px(40);
               
           }
         } 
    }
    #pageload{
//      display: none;
        min-width: 320px;
        max-width: 480px; 
        min-height: 568px;
        max-height: 736px;
        height: 100%;
        background: #4f4f4f;
        position: relative;
        .star{
            font-size: 0;
            height: 100%;
            position: absolute;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .earth{
            font-size: 0;
            text-align: right;
            position: absolute;
            bottom: 0;
        img{
           width: 68%; 
            }
        }
        .protagonist{
            text-align: center;
            position: absolute;
            bottom:px(180);
        img{
            width: 90%;
            }
        }
        .please{
            transform: scale(0);
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 1%;
            animation: da 0.8s linear forwards;
            img{
                width:35%;
            }
        }
        .arrow{
            width: 100%;
            position: absolute;
            bottom: px(230);
            text-align: center;
            img{
                width: 18%;
            }
        }
        .progresstext{
            position: absolute;
            color: white;
            bottom: px(160);
            font-size: 16px;
            left: px(15);
            
        }
    }
    #pageStart{
    display: none;
    overflow: hidden;
    position: relative;
    height: 100%;
    .light_bg{
        width: 0;
        height: 0;
        border-top: px(90) solid transparent;
        border-bottom: px(90) solid transparent;       
        border-left:px(800) solid #555;
        border-right: px(800) solid #555;
        position: absolute;
        top: -999px;
        bottom: -999px;
        left: -999px;
        right: -999px;
        margin: auto;
        transform-origin: center;
    }
    .lg1{
        transform: rotate(0deg);
        animation: l1 4s linear infinite;
    }
    .lg2{
        transform: rotate(30deg);
        animation: l2 4s linear infinite;
    }
    .lg3{
        transform: rotate(60deg);
        animation: l3 4s linear infinite;
    }
    .lg4{
        transform: rotate(90deg);
        animation: l4 4s linear infinite;
    }
    .lg5{
        transform: rotate(120deg);
        animation: l5 4s linear infinite;
    }
    .lg6{
        transform: rotate(150deg);
        animation: l6 4s linear infinite;
    }
    .logo{
        position: absolute;
        right: 0;
        top: 0;
        padding: px(18);
        img{
            width: px(270);
        }
    }
    .title{
        text-align: center;
        position: absolute;
        top: px(125);
        img{
            width: 93%; 
        }
    }
    .mouth{
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        animation: mouth 1s ease infinite;
        img{
            width: 85%;
        }
    }
    .manLeft{
        text-align: left;
        position: absolute;
        bottom: px(160);
        left: px(15);
        img{
            width: 51%;
        }
    }
    .manRight{
        text-align: right;
        position: absolute;
        bottom: px(120);
        right: px(15);
        img{
            width: 51%;
        }
    }
    .start{
        border: none;
        background-color: transparent;
        position: absolute;
        bottom: px(30);
        animation: kaishi 1s ease infinite;
        left: 50%;
        margin-left: px(-200);
        img{
            width: px(390);
        } 
    }
    .wenhao1{
        position: absolute;
        bottom: px(300);
        left: px(20);
        animation: what 1s ease infinite ;
        img{
            width: 50%;
        }
    }
    .wenhao2{
        height: 100%;
        position: relative;
        img{
            position: absolute; 
          width: px(50);  
        }
        .w1{
           bottom: px(450);
           right: px(25);
        }
        .w2{
           bottom: px(430);
           right: px(310);
        }
        .w3{
           bottom: px(350);
           right: px(25);
        }
        .w4{
           bottom: px(330);
           right: px(320);
        }
    }
    .whatSong{
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5%;
        img{
            width:px(240);
        }
    }
    
    }
    
    #laoge{
        display: none;
        overflow: hidden;
        position: relative;
        height: 100%;
    .laoge_bg{
        font-size: 0;
        position: absolute;
        height: 100%;
        img{
            width:100%;
            height: 100%;
        } 
    }
    .light{
        position: absolute;
        right: -40%;
        top: 0;
        text-align: right;
        img{
            width:85%;
        }
    }
    .oldman{
        width: 100%;
        text-align: center;
        position: absolute;
        top: 8%;
        img{
            width: px(580);
        }
    }
    .hualeft{
        position: absolute;
        top: (400/1206)*100%;
        left: (45/750)*100%;
        transform: scale(1);
        animation: hua 1s ease infinite;
        img{
            width: px(220);
        }
    }
    .huaright{
        position: absolute;
        top: (400/1206)*100%;
        right: (35/750)*100%;
        transform: scale(1);
        animation: hua 1s ease infinite;
        img{
            width: px(180);
        }
    }
    
    
    }
    #rb{
        display: none;
        overflow: hidden;
        position: relative;
        height: 100%;
        .laoge_bg{
        font-size: 0;
        position: absolute;
        height: 100%;
        img{
            width:100%;
            height: 100%;
        } 
        }
        .light2{
            position: absolute;
            top: 0;
            text-align: center;
            img{
                width:85%;
            }
        }
        .carbox{
            position: absolute;
            width: 100%;
            text-align: center;
            top: 22%;
            .car{
                animation: car 0.8s ease infinite;
                width: 100%;
                img{
                    width: 90%;
                }
            }
            .threeyao{
                position: absolute;
                top: -55%;
                left: 5%;
                img{
                    width: px(500);
                }
            }
        }
        
    }
    #rock{
        display: none;
        position: relative;
        height: 100%;
        overflow: hidden;
        .light_bg{
        width: 0;
        height: 0;
        border-top: px(90) solid transparent;
        border-bottom: px(90) solid transparent;       
        border-left:px(800) solid #555;
        border-right: px(800) solid #555;
        position: absolute;
        top:px(-999);
        bottom: px(-999);
        left: px(-999);
        right:px(-999);
        margin: auto;
        transform-origin: center;
    }
    .lg1{
        transform: rotate(0deg);
        animation: l1 4s linear infinite;
    }
    .lg2{
        transform: rotate(30deg);
        animation: l2 4s linear infinite;
    }
    .lg3{
        transform: rotate(60deg);
        animation: l3 4s linear infinite;
    }
    .lg4{
        transform: rotate(90deg);
        animation: l4 4s linear infinite;
    }
    .lg5{
        transform: rotate(120deg);
        animation: l5 4s linear infinite;
    }
    .lg6{
        transform: rotate(150deg);
        animation: l6 4s linear infinite;
     }
     
     .stage{
         position: absolute;
         text-align: center;
         top: 45%;
         img{
             width:100%;
         }
     }
     .songer{
         width: 100%;
         position: absolute;
         text-align: center;
         top: px(140);
         img{
             width: px(500);
         }
     }
     .audienceLeft{
         position: absolute;
         top: 29%;
         img{
             width: 53%;
         }
     }
     .wow{
         position: absolute;
         top: 23%;
         img{
             width: 52%;
         }
     }
     .audienceRight{
         position: absolute;
         text-align: right;
         top: 28%;
         right: 0;
         img{
             width: 53%;
         }
     }
     .wow2{
         position: absolute;
         top: 18%;
         right: 0;
         text-align: right;
         img{
            width: 50%;
         }
     }
     
        
    }
    
    #movie{
        display: none;
        overflow: hidden;
        position: relative;
        height: 100%;
        .laoge_bg{
        font-size: 0;
        position: absolute;
        height: 100%;
        img{
            width:100%;
            height: 100%;
        } 
        }
        .moviebox{
            width: 100%;
            .movie1{
                position: absolute;
                top: 3%;
                left: px(6);
                img{
                    width: 80%;
                }
            }
            .movie3{
                transform: translateY(-150%);
                animation: movie 1s ease forwards ;
                position: absolute;
                top: 12%;
                text-align: center;
                img{
                    width: 85%;
                }
            }
            .movie2{
                position: absolute;
                top: 46.5%;
                img{
                    width: 100%;
                }
            }
        }
        
        
    }
    
    #jingdian{
        display: none;
        overflow: hidden;
        position: relative;
        height: 100%;
        
        .laoge_bg{
        font-size: 0;
        position: absolute;
        height: 100%;
        img{
            width:100%;
            height: 100%;
        } 
        }
        .light2{
            position: absolute;
            top: 0;
            text-align: center;
            img{
                width:85%;
            }
        }
        .jiandianbox{
            width: 100%;
            .walls{
                position: absolute;
                top: 45%;
                img{
                    width: 100%;
                }
            }
            .peo{
                position: absolute;
                text-align: right;
                top: 15%;
                img{
                    width: 95%;
                }
            }
            .sanbang1{
                position: absolute;
                text-align: left;
                top:30% ;
                img{
                    width:60%;
                }
            }
            .jianfeizao{
                position: absolute;
                top: 15%;
                text-align: center;
                transform: translateX(14%);
                img{
                    width: 55%;
                }
            }
            .sanbang2{
                position: absolute;
                text-align: right;
                top: 35%;
                img{
                    width: 55%;
                }
            }
            .feizao{
                position: absolute;
                top: 58%;
                left: 10%;
                img{
                    width: 50%;
                }
            }
        }
    }
    
    
    #liuxing{
        display: none;
       overflow: hidden;
        position: relative;
        height: 100%;
        .liuxing_bg{
            font-size: 0;
            position: absolute;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .wogeini{
            position:absolute;
            top: 2%;
            img{
                
                width: 75%;
            }
        }
        .man{
            
            position: absolute;
            top: 26%;
            transform: translateX(-50%);
            animation: man 1s ease forwards;
            img{
                width: 85%;
            }
        }
        .woman{
            position: absolute;
            text-align: right;
            top: 12%;
            img{
                width: 46%;
            }
        }
         
    }
    
      #end{
          display: none;
        overflow: hidden;
        position: relative;
        height: 100%;
        .end_bg{
            font-size: 0;
            position: absolute;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .logo{
        position: absolute;
        right: 0;
        top: 0;
        padding: px(18);
        img{
            width: px(270);
        }
        }
    }
     
     
     
     
    
}

























@keyframes l1{
    0%{
       transform: rotate(0deg); 
    }
    100%{
        transform: rotate(360deg);
    }
}@keyframes l2{
    0%{
        transform: rotate(30deg);
    }
    100%{
        transform: rotate(390deg);
    }
}
@keyframes l3{
    0%{
        transform: rotate(60deg);
    }
    100%{
        transform: rotate(420deg);
    }
}
@keyframes l4{
    0%{
        transform: rotate(90deg);
    }
    100%{
        transform: rotate(450deg);
    }
}
@keyframes l5{
    0%{
        transform: rotate(120deg);
    }
    100%{
        transform: rotate(480deg);
    }
}
@keyframes l6{
    0%{
        transform: rotate(150deg);
    }
    100%{
        transform: rotate(510deg);
    }
}

@keyframes da{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }   
}
@keyframes mouth{
    0%{
        transform: scale(1) translateY(-50%);
    }
    50%{
        transform:scale(1.05) translateY(-50%);
    }
    100%{
        transform:scale(1) translateY(-50%);
    }
}
@keyframes what{
    0%{
            transform: rotateZ(2deg)
    }
    50%{
            transform: rotateZ(-2deg)
    }
    100%{
            transform: rotateZ(2deg)
    }
}
@keyframes kaishi{
    0%, 100% {
    transform: scale3d(1,1,1);
}
10%, 20% {
    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
}
30%, 50%, 70%, 90% {
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
}
40%, 60%, 80% {
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    }
}

@keyframes movie{
    0%{
        transform: translateY(-150%);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes man{
    0%{
       transform: translateX(-50%); 
    }
    100%{
        transform: translateX(15%);
    }
}

  @keyframes car{
      0%{
          transform: rotate(10deg);
      }
      50%{
          transform: rotate(-10deg);
      }
      100%{
          transform: rotate(10deg);
      }
  }
  @keyframes hua{
      0%{
          transform: scale(0.8,0.8);
      }
      80%{
          transform: scale(1.1);
      }
      100%{
          transform: scale(1);
      }
  }          